<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cesium App</title>
    <script src="./script/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./script/Cesium/Widgets/widgets.css" />
    <style>
      html,
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer" style="width: 100%"></div>
    <script>
      const geeMetadata = new Cesium.GoogleEarthEnterpriseMetadata(
        "http://www.earthenterprise.org/3d"
      );
      const gee = new Cesium.GoogleEarthEnterpriseImageryProvider({
        metadata: geeMetadata,
      });

      var guge = new Cesium.UrlTemplateImageryProvider({
        url: "http://www.google.cn/maps/vt?lyrs=s@800&x={x}&y={y}&z={z}",
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        minimumLevel: 1,
        maximumLevel: 20,
      });

      const guge2 = new Cesium.UrlTemplateImageryProvider({
        url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali",
      });

      const viewer = new Cesium.Viewer("cesiumContainer", {
        baseLayerPicker: false,
        navigationHelpButton: false,
        sceneModePicker: false,
        imageryProvider: guge2,
      });

      viewer.camera.setView({
        destination: new Cesium.Cartesian3.fromDegrees(116.39, 39.9, 15000.0),
        orientation: {
          heading: Cesium.Math.toRadians(45.0), // east, default value is 0.0 (north)
          pitch: Cesium.Math.toRadians(-45), // default value (looking down)
          roll: 0.0, // default value
        },
      });

      setTimeout(() => {
        viewer.camera.flyTo({
          destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),
          orientation: {
            heading: 0.6, // east, default value is 0.0 (north)
            pitch: -0.66, // default value (looking down)
            roll: 0.0, // default value
          },
        });
      }, 3000);

      const primitivesColl = new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(3839),
      });
      const city = viewer.scene.primitives.add(primitivesColl);

      const cityStyle = new Cesium.Cesium3DTileStyle({
        color: {
          conditions: [
            ["${height} >= 200", 'color("purple", 0.5)'],
            ["${height} >= 50", 'color("red")'],
            ["true", 'color("blue")'],
          ],
        },
        //show: "${Height} > 0",
        meta: {
          description: '"Building id ${id} has height ${height}."',
        },
      });

      city.style = cityStyle;
    </script>
  </body>
</html>
